<template>
	<view class="container">
		<!-- User profile header -->
		<view class="user-info" @click="mineInfo">
			<image class="avatar" :src="avatar" mode="aspectFill"></image>
			<view class="user-detail">
				<text class="user-phone">{{ username }}</text>
				<text class="user-status">{{ phone }}</text>
			</view>
			<text class="arrow">></text>
		</view>
		<!-- Feature grid -->
		<view class="feature-grid" v-if="userType === 0">
			<view class="grid-row">
				<view class="grid-item" v-for="(item, index) in gridItems1" :key="index"
					@click="handleItemClick(item.page)">
					<image class="icon" :src="item.icon"></image>
					<text class="title">{{ item.title }}</text>
				</view>
			</view>
		</view>
		<!-- 患者列表 -->
		<scroll-view class="patient-list-scroll" v-if="userType === 1" scroll-y="true">
			<view v-for="(patient,index) in patientList" :key="index" class="patient-list-item">
				<view class="patient-info">
					<view class="patient-header">
						<text class="patient-name">{{ patient.patient }}</text>
					</view>
					<view class="patient-details">
						<text class="patient-phone">📱 {{ patient.phone }}</text>
						<text class="patient-history">🩺 {{ patient.medicalHistory || '暂无病史' }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 待办中心 (Todo Center) -->
		<view class="todo-center" v-if="userType === 0">
			<view class="section-header">
				<text class="section-title">待办中心</text>
				<view class="view-all" @click="viewAllTodos">
					<text class="view-all-text">查看全部</text>
					<text class="arrow">></text>
				</view>
			</view>
			<view class="todo-list">
				<view class="todo-item" v-for="(item, index) in todoItems" :key="index" @click="handleTodoClick(item)">
					<view class="todo-left">
						<image class="todo-icon" :src="item.icon"></image>
						<view class="todo-content">
							<text class="todo-title">{{ item.title }}</text>
							<text class="todo-desc">{{ item.description }}</text>
						</view>
					</view>
					<view class="todo-right">
						<text class="todo-status"
							:class="item.status === '待处理' ? 'status-pending' : 'status-done'">{{ item.status }}</text>
						<text class="arrow"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- Bottom menu (kept for reference) -->
		<view class="menu-list">
			<view class="menu-item" v-for="(item, index) in userType === 0 ? menuItems : menuItems2" :key="index"
				@click="handleMenuClick(item)">
				<view class="menu-left">
					<image class="menu-icon" :src="item.icon"></image>
					<text class="menu-title">{{ item.title }}</text>
				</view>
				<text class="arrow">></text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				username: '',
				phone: '',
				avatar: '',
				userType: 1,
				gridItems1: [{
						title: '我的收藏',
						page: 'collection',
						icon: '/static/mine/shoucang.png'
					},
					{
						title: '我的预约',
						page: 'appointment',
						icon: '/static/mine/yuyue.png'
					},
					{
						title: '我的医嘱',
						page: 'doctors',
						icon: '/static/mine/yizhu.png'
					}
				],
				todoItems: [{
						title: '预约体检',
						description: '2025/03/20 上午9:30',
						status: '待处理',
						icon: '/static/index/yuyue.png'
					},
					{
						title: '复诊提醒',
						description: '2025/03/25 下午2:00',
						status: '待处理',
						icon: '/static/index/yuyue.png'
					},
					{
						title: '缴费提醒',
						description: '¥230.00 待支付',
						status: '待处理',
						icon: '/static/index/yuyue.png'
					}
				],
				menuItems: [{
						url: 'customer',
						title: '联系客服',
						icon: '/static/mine/kefu.png'
					},
					{
						url: 'suggestion',
						title: '投诉建议',
						icon: '/static/mine/tousu.png'
					},
					{
						url: 'about',
						title: '关于我们',
						icon: '/static/mine/gaunyu.png'
					}
				],
				menuItems2: [{
						title: '我的收藏',
						page: 'collection',
						icon: '/static/mine/shoucang.png'
					}, {
						url: 'customer',
						title: '联系客服',
						icon: '/static/mine/kefu.png'
					},
					{
						url: 'suggestion',
						title: '投诉建议',
						icon: '/static/mine/tousu.png'
					},
					{
						url: 'about',
						title: '关于我们',
						icon: '/static/mine/gaunyu.png'
					}
				],
				patientList: [], // 患者列表
				globaApi: '',
				token: ''
			}
		},
		onShow() {
			this.loadUserInfo();
		},
		onLoad() {
			this.globaApi = getApp().globalData.baseUrl
			this.userType = uni.getStorageSync('userType')
			this.username = uni.getStorageSync('username')
			this.avatar = uni.getStorageSync('avatar')
			this.phone = uni.getStorageSync('telephone')
			this.token = uni.getStorageSync('token')
			if (this.userType === 1) {
				this.fetchPatientList()
			}
		},
		methods: {
			// 加载用户信息
			loadUserInfo() {
				const userId = uni.getStorageSync('userId');
				this.userType = uni.getStorageSync('userType');
				if (this.userType === 0) {
					var endpoint = `${this.globaApi}/userInfo/getUserInfoByUserId`;
					uni.setStorageSync('userType', 0);
				} else {
					var endpoint = `${this.globaApi}/doctor/getDoctorById`;
					uni.setStorageSync('userType', 1);
				}
				uni.request({
					url: endpoint,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: {
						id: userId
					},
					success: (res) => {
						if (res.data.code === 200) {
							console.log(res)
							// 将用户信息存储在本地存储中
							this.username = res.data.data.name
							this.avatar = res.data.data.avatar
							this.phone = res.data.data.phone
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '查询信息错误，请稍后重试',
							icon: 'none'
						});
					}

				})
			},
			fetchPatientList() {
				uni.request({
					url: `${this.globaApi}/reservation/getReservationByDoctorId`,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'token': this.token
					},
					success: (res) => {
						if (res.data.code === 200) {
							this.patientList = res.data.data;
							console.log(this.patientList);
						} else {
							uni.showToast({
								title: '获取患者列表失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
					}
				});
			},
			handleItemClick(item) {
				console.log('Clicked:', item.title)
				uni.navigateTo({
					url: `/pages/mine/${item}/${item}`
				})
				// Handle navigation or action based on clicked item
			},
			handleMenuClick(item) {
				console.log('Menu clicked:', item.title)
				// Handle menu item click
				uni.navigateTo({
					url: `/pages/mine/menus/${item.url}/${item.url}`
				})
			},
			handleTodoClick(item) {
				console.log('Todo clicked:', item.title)
				// Handle todo item click
			},
			viewAllTodos() {
				console.log('View all todos clicked')
				// Navigate to todos list page
				uni.navigateTo({
					url: '/pages/mine/todos/todosList'
				})
			},
			mineInfo() {
				uni.navigateTo({
					url: '/pages/mine/mineInfo/mineInfo'
				})
			}
		}
	}
</script>
<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		height: 100vh;
		background-color: #f5f5f5;
	}

	/* User profile section */
	.user-info {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #e1f1ff;
	}

	.user-detail {
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.user-phone {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.user-status {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.arrow {
		font-size: 36rpx;
		color: #999;
	}

	/* Feature grid */
	.feature-grid {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
	}

	.grid-row {
		display: flex;
		justify-content: space-between;
	}

	.grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
	}

	.icon {
		width: 70rpx;
		height: 70rpx;
		margin-bottom: 10rpx;
	}

	.title {
		font-size: 24rpx;
		color: #333;
		text-align: center;
	}

	/* Todo Center Section */
	.todo-center {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.view-all {
		display: flex;
		align-items: center;
	}

	.view-all-text {
		font-size: 24rpx;
		color: #999;
		margin-right: 10rpx;
	}

	.todo-list {
		padding: 10rpx 0;
	}

	.todo-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 10rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.todo-item:last-child {
		border-bottom: none;
	}

	.todo-left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.todo-icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.todo-content {
		display: flex;
		flex-direction: column;
	}

	.todo-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
	}

	.todo-desc {
		font-size: 24rpx;
		color: #999;
		margin-top: 6rpx;
	}

	.todo-right {
		display: flex;
		align-items: center;
	}

	.todo-status {
		font-size: 24rpx;
		margin-right: 15rpx;
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
	}

	.status-pending {
		color: #ff9900;
		background-color: #fff9f0;
	}

	.status-done {
		color: #52c41a;
		background-color: #f6ffed;
	}

	/* Menu list */
	.menu-list {
		background-color: #fff;
		border-radius: 20rpx;
	}

	.menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-left {
		display: flex;
		align-items: center;
	}

	.menu-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.menu-title {
		font-size: 28rpx;
		color: #333;
	}

	.patient-list-scroll {
		/* height: calc(100vh - 800rpx); */
	}

	.patient-list-item {
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.patient-info {
		flex: 1;
		margin-right: 20rpx;
	}

	.patient-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.patient-name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.patient-gender {
		font-size: 24rpx;
		color: #666;
	}

	.patient-details {
		display: flex;
		flex-direction: column;
	}

	.patient-phone,
	.patient-history {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.patient-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.patient-modal-content {
		background-color: white;
		width: 85%;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.patient-modal-header {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.patient-form-item {
		margin-bottom: 20rpx;
	}

	.patient-form-item text {
		display: block;
		margin-bottom: 10rpx;
		font-size: 28rpx;
	}

	.patient-form-item input,
	.patient-form-item textarea {
		background-color: #f5f5f5;
		border-radius: 10rpx;
		padding: 15rpx;
		font-size: 28rpx;
	}

	.patient-form-item textarea {
		height: 150rpx;
	}

	.patient-form-item radio-group {
		display: flex;
	}

	.patient-form-item radio-group label {
		margin-right: 30rpx;
	}

	.patient-modal-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.patient-modal-cancel,
	.patient-modal-confirm {
		flex: 1;
		text-align: center;
		padding: 15rpx;
		border-radius: 50rpx;
		margin: 0 10rpx;
		font-size: 28rpx;
	}

	.patient-modal-cancel {
		background-color: #f5f5f5;
		color: #666;
	}

	.patient-modal-confirm {
		background-color: #4CAF50;
		color: white;
	}
</style>